<template>
	<div class="goods-box">
		<div class="goods-list" :style="{ margin: `${showData.styleMargin}px` }">
			<div
				v-if="showData.goodsList && showData.goodsList.length && showData.goodsList[0].id"
				v-for="(item, index) in showData.goodsList"
				:key="index"
				class="goods-li"
				:style="{ padding: `${showData.stylePadding}px` }"
				:class="{ 'is-goods-cell2': showData.showType === '2', 'is-goods-cell3': showData.showType === '3' }"
			>
				<div class="goods-li-box">
					<div class="goods-item">
						<div class="goods-img-one" :style="{ backgroundImage: 'url(' + item.spuUrls[0] + ')' }"></div>
						<div class="goods-box-info">
							<div class="goods-info-title">
								{{ item.name }}
							</div>
							<div class="goods-info-desc" v-if="showData.showDesc">
								{{ item.subTitle }}
							</div>
							<div class="goods-info-price">
								<div class="price-info">￥{{ item.lowPrice }}</div>
								<div class="goods-info-buy-btn">
									<el-icon v-if="showData.buyBtnStyle === '1'" color="#ff4444" size="20">
										<ele-Handbag />
									</el-icon>
									<el-icon v-if="showData.buyBtnStyle === '2'" color="#ff4444" size="20">
										<ele-ShoppingCart />
									</el-icon>
									<el-button v-if="showData.buyBtnStyle === '3'" color="#ff4444" size="mini">
										{{ showData.buyBtnText }}
									</el-button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div v-else class="goods-li">
				<div class="goods-li-box">
					<div class="goods-item">
						<div class="goods-img-one" :style="{ backgroundImage: 'url(' + goodsPic + ')' }"></div>
						<div class="goods-box-info">
							<div class="goods-info-title">这里显示商品名称，最多显示1行</div>
							<div class="goods-info-desc" v-if="showData.showDesc">这里显示商品描述，最多显示1行</div>
							<div class="goods-info-price">
								<div class="price-info">￥9999</div>
								<div class="goods-info-buy-btn">
									<el-icon v-if="showData.buyBtnStyle === '1'" color="#ff4444" size="20">
										<ele-Handbag />
									</el-icon>
									<el-icon v-if="showData.buyBtnStyle === '2'" color="#ff4444" size="20">
										<ele-ShoppingCart />
									</el-icon>
									<el-button v-if="showData.buyBtnStyle === '3'" color="#ff4444" size="mini">
										{{ showData.buyBtnText }}
									</el-button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import goodsPic from '/@/assets/goods-pic.svg';
export default defineComponent({
	props: {
		showData: {
			type: Object as any,
		},
	},
	setup() {
		return { goodsPic };
	},
});
</script>

<style scoped lang="scss">
.goods-box {
	position: relative;
	padding: 5px 5px;

	.goods-list {
		display: flex;
		flex-wrap: wrap;

		.goods-li {
			width: 100%;

			&.is-goods-cell2 {
				width: 50%;
			}

			&.is-goods-cell3 {
				width: 33.33%;
			}

			.goods-li-box {
				padding: 10px 5px;

				.goods-item {
					position: relative;

					.goods-img-one {
						width: 100%;
						background-color: #ccc;
						background-repeat: no-repeat;
						background-size: cover;

						&::before {
							content: '';
							padding-top: 100%;
							float: left;
						}

						&::after {
							content: '';
							display: block;
							clear: both;
						}
					}

					.goods-box-info {
						margin-top: 3px;

						.goods-info-title {
							width: 100%;
							font-size: 12px;
							overflow: hidden;
							text-overflow: ellipsis;
							-o-text-overflow: ellipsis;
							-webkit-text-overflow: ellipsis;
							-moz-text-overflow: ellipsis;
							white-space: nowrap;
						}

						.goods-info-desc {
							width: 100%;
							font-size: 12px;
							color: #999;
							overflow: hidden;
							text-overflow: ellipsis;
							-o-text-overflow: ellipsis;
							-webkit-text-overflow: ellipsis;
							-moz-text-overflow: ellipsis;
							white-space: nowrap;
							margin-top: 5px;
						}

						.goods-info-price {
							position: relative;
							margin-top: 10px;

							&.goods-cell-3 {
								padding-right: 20px;
							}

							.price-info {
								width: 100%;
								font-size: 14px;
								color: #ff4444;
								overflow: hidden;
								text-overflow: ellipsis;
								-o-text-overflow: ellipsis;
								-webkit-text-overflow: ellipsis;
								-moz-text-overflow: ellipsis;
								white-space: nowrap;
							}

							.goods-info-buy-btn {
								position: absolute;
								top: 0;
								right: 0;

								.el-button {
									line-height: 22px;
									height: 24px;
									padding: 0 7px;
								}
							}
						}
					}
				}
			}
		}
	}
}
</style>
